<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云顶请假系统管理端</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="admin_2.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>
    <div id="app">
        <div class="big_box">
            <div class="section_One">
                <img class="p2"
                    src="https://chibaoshaitaiyang-1316184616.cos.ap-beijing.myqcloud.com/QQ%E5%9B%BE%E7%89%8720230322141205.jpg" alt="">
            </div>
            <div class="header">
                <div class="logo">
                    <img class="logo2"
                        src="https://chibaoshaitaiyang-1316184616.cos.ap-beijing.myqcloud.com/%E7%99%BD%E8%89%B2%E9%80%8F%E6%98%8E%20%281%29.png"
                        alt="">
                </div>
                <div class="header_Title">
                    <div class="spe">主页</div>
                    <div id="btn2">本周汇总</div>
                    <div id="btn3">数据可视化</div>
                    <div>设置</div>
                </div>
            </div>

            <div class="section_Three">
                <div id="date">
                    <input type="text" v-model="date" placeholder="请输入格式为:YYYY-MM-DD的日期"
                        style="width: 400px; height: 30px; border-radius: 5px;text-align: center;">
                    <button
                        style="height: 30px;width: 50px;background-color: #5F95D4; border:transparent;color:white;border-radius: 5px;"
                        @click="search">查询</button>
                </div>
                <template v-if="maskVisable">
                    <div class="zhezhao" id='zhezhao'></div>
                    <div class="tankuang">
                        <div id="header">
                            <div v-if="currentType=='leave'" class="reason">
                                请假原因:{{res.leave[currentIndex].reason}}
                            </div>
                            <div v-if="currentType=='adjust'" class="reason">
                                研学原因:{{res.adjust[currentIndex].reason}}
                            </div>
                            <div id="header-right" @click="hidder()">x</div>
                        </div>
                    </div>
                </template>

                <div class="left">
                    <div class="left_title">&nbsp&nbsp请假:</div>
                    <div v-if="res.leave.length===0">
                        暂无数据
                    </div>
                    <div class="message">
                        <div v-for="(item,index) in res.leave" :key="index" class="first">
                            <div>方向:{{item.direction}}</div>
                            <div>姓名:{{item.name}}</div>
                            <button type="button" @click="dianwo(index,'leave')" class="btn">原因</button>
                        </div>


                    </div>

                </div>
                <div class="right">
                    <div class="left_title">&nbsp&nbsp调研学:</div>
                    <div v-if="res.adjust.length===0">
                        暂无数据
                    </div>
                    <div class="message">
                        <div v-for="(item,index) in res.adjust" :key="index" class="first">
                            <div>方向:{{item.direction}}</div>
                            <div>姓名:{{item.name}}</div>
                            <button type="button" @click="dianwo(index,'adjust')" class="btn">原因</button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="section_Four">
                <div class="ip">山西</div>
                <div class="school">太原理工大学</div>
                <div class="session">云顶书院</div>
                <div class="hit"></div>
                <div class="geyan">搜索云里云外开源社区,一起畅游技术之海</div>
            </div>
            <div class="section_Five">
                <img class="first"
                    src="https://s1.ax1x.com/2023/03/20/ppNGCcQ.png"
                    alt="">
            </div>
            <div class="section_Six">
                <img class="second"
                    src="https://s1.ax1x.com/2023/03/20/ppNGPXj.png"
                    alt="">
            </div>


        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    maskVisable: false,
                    date: '',
                    currentIndex: undefined,//当前弹出信息的目标的下标
                    currentType: undefined,//当前点击的类型(请假,研学)
                    res: {
                        leave: [
                            // { direction: '全栈1', name: '工程师1', id: 0, reason: '生病' },
                            // { direction: '全栈2', name: '工程师2', id: 1, reason: '逃课' },
                            // { direction: '全栈3', name: '工程师3', id: 2, reason: '探亲' },
                            // { direction: '全栈4', name: '工程师4', id: 3, reason: '面试' },
                            // { direction: '全栈5', name: '工程师5', id: 4, reason: '打游戏去了' },
                        ],
                        adjust: [
                            // { direction: '人工智能', name: '工程师1', reason: '生病1111' },
                            // { direction: '大数据', name: '工程师2', reason: '逃课222' },
                            // { direction: '面部识别', name: '工程师3', reason: '探亲333' },
                            // { direction: '自动驾驶', name: '工程师4', reason: '面试444' },
                            // { direction: '区块链', name: '工程师5', reason: '打游戏' },
                        ]
                    }
                }
            },
            mounted() { },
            methods: {
                search() {
                    this.maskVisable = false
                    this.getReasonInfo()  //返回姓名方向
                },
                dianwo(index, type) {
                    this.currentType = type
                    console.log('currentType', this.currentType)
                    console.log('index', index)
                    this.currentIndex = index
                    console.log('currentIndex', this.currentIndex)
                    this.maskVisable = true
                    // this.getReasonInfo()  //返回原因
                },
                // handleLearnReason(index) {
                //     console.log('index', index)
                //     this.currentIndex = index
                //     console.log('currentIndex', this.currentIndex)
                //     this.maskVisable = true
                //     // this.getReasonInfo()  //返回原因
                // },
                getReasonInfo() {
                    console.log('111', this.date)
                    axios({
                        url: `http://4ussc82j.shenzhuo.vip:47189/integrate/?s_date=${this.date}`,
                        method: "GET",
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        // data: {
                        //     s_date: this.date
                        // }
                    }).then(res => {
                        console.log(res)
                        this.res.leave = res.data.leave
                        this.res.adjust = res.data.adjust

                        // this.res.reason = res.result.reason
                        // this.res.reason1 = res.result.reason1


                    })
                },
                hidder() {
                    // document.getElementById('zhezhao').style.display = "none";
                    this.maskVisable = false
                }

            },
        })
        var btn2=document.getElementById('btn2');
        btn2.onclick=function(){
            window.location.href="../admin_3/admin_3.html"
        }
         var btn3 = document.getElementById('btn3');
            btn3.onclick = function () {
                window.location.href = "../admin_4/admin_4.html"
            }
        // document.getElementById('zhezhao').style.display = "none";
        // function dianwo() {
        //     document.getElementById('zhezhao').style.display = "";
        //     var date = document.getElementById('date').value;
        //     console.log('date', date)
        //     getReasonInfo()
        // }
        // function hidder() {
        //     document.getElementById('zhezhao').style.display = "none";
        // }

        // var fangxiang = document.getElementsByClassName('fangxiang');
        // var name = document.getElementsByClassName('name');



    </script>
